{% extends "jogo/basedesign.html" %}

{% block extrahead %}
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    $(function() {
        $(".check").button({
            icons: {
               primary: 'ui-icon-circle-check'}
           });
        $("button, input:submit, a").button();
    });
</script>

{% endblock extrahead %}

{% block tela %}
	<h1 align="center">Ranking</h1>
	    <table width="600" border="0" style="table-layout:fixed; background-color: #EEE9AA,#FFFFFF;" align="center" >
            <col width="14.5%">
            <col width="15.5%">
            <col width="11.6%">
            <col width="11.6%">
            <col width="11.6%">
            <col width="11.6%">
            <col width="11.6%">
	    	<tr valign="bottom">
	    		<td align="center">Nome</td>
				<td align="center">Dificuldade</td>
				<td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/vuvuzelaouro.png"><br/>Esporte</td>
			    <td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/oscar.png"><br/>Cinema</td>
                <td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/grammy.png"><br/>Música</td>
				<td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/emmy.png"><br/>Televisão</td>
				<td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/diploma.png"><br/>C. Gerais</td>
				<td align="center" style="font-size: 10"><img src="/osindicadosmedia/img/nobel.png"><br/>Ciências</td>
	    	</tr>
			{% for p in placares %}
			<tr align="center" bgcolor="#EEE9AA">
				<td align="left">{{p.nomeJogador}}</td>
				<td>{{p.dificuldade}}</td>
				<td>{{p.acertosEsporte}}</td>
				<td>{{p.acertosCinema}}</td>
				<td>{{p.acertosMusica}}</td>
				<td>{{p.acertosTelevisao}}</td>
				<td>{{p.acertosCGerais}}</td>
				<td>{{p.acertosCiencias}}</td>
			</tr>
			{% endfor %}
	    </table>

    <br><br>
	<div align="center">
    <a href="../config">Voltar para Tela Inicial</a>
	</div>
{% endblock tela %}
{% block sidebar %}
<form action="../ranking/" name="temas_form" id="temas_form" method="post">
    <table style="font-size: small;" align="center">
    <tr><td>
    <center><h2 style="color: white;">Filtros:</h2></center>
	   </td></tr><tr><td>
		{% csrf_token %}
		{% for t in temas %}
		  <input type="checkbox" name="temasSelecionados" value="{{t.nome}}" id="{{t.nome}}" class="check"/><label class="temaselecionado" for="{{t.nome}}">{{t.nome}}</label></br>
		  </td></tr><tr><td>
    	{% endfor %}
		</br></br>
    <input type="submit" class="temaselecionado" value="Aplicar Filtros">
    </td></tr>
	</table>
</form>

{% endblock sidebar %}
